<!DOCtype html>
<html lang="en">
<head>
    {% load bootstrap3 %}
    {% bootstrap_css %}
    {% bootstrap_javascript %}
    <title>Env</title>
    <script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
        $(function(){
            edit();
            add();
            del();
            paging();
            funisRepeat();
        });
        //编辑
        function edit(){
            $("#btn2").click(function(){
                $("#myAlert").css("display","none");
                $("#myAlert1").css("display","none");
                var count=0;
                var env_value;
                var env=new Array();
                var elements=$(".ipt");
                $("#table").find(":checkbox:checked").each(function(){
                    env_value=$(this).parent()
                    for (var i=0;i<elements.length;i++){
                        env_value=env_value.next()
                        //alert(email_value.text());
                        env[i]=env_value.text();
                    }
                    //alert(email_subject)
                    count++;
                });
                if (count==1)
                {
                    //alert(env);
                    for (var i=0;i<env.length;i++){
                        $(elements[i]).val(env[i]);
                    }
                    $('#editMyModal').modal("show");
                }
                else{
                    $("#myAlert").css("display","inherit");
                }
            });
        }
        //新增
        function add(){
            $("#btn1").click(function(){
                $("#myAlert").css("display","none");
                $("#myAlert1").css("display","none");
            });
        }
        //删除
        function del(){
            $("#btn3").click(function(){
                var env_ids=new Array();
                var count=0;
                var i=0;
                $("#myAlert").css("display","none");
                $("#myAlert1").css("display","none");
                $("#table").find(":checkbox:checked").each(function(){
                    env_id = $(this).parent().next().text();
                    if (env_id != ""){
                        env_ids[i++]=env_id;
                    }
                    count++;
                });
                //alert(env_ids);
                if (count==0){
                    $("#myAlert1").css("display","inherit");
                    return false;
                }
                else{
                    $("#ipt1").val(env_ids);
                    $("#del").submit();
                }
            });
        }
        //分页
        function paging(){
            function merge(btn){
                elementip=$("#ipt2").val();
                elementhost=$("#ipt3").val();
                elementport=$("#ipt4").val();
                oldHref=$(btn).attr("href");
                href=oldHref+"&ip="+elementip+"&host="+elementhost+"&port="+elementport
                $(btn).attr("href",href)
            }
            var elementip,elementhost,elementport;
            $("#first").click(function(){
                merge(this);
            });
            $("#previous").click(function(){
                merge(this);
            });
            $("#next").click(function(){
                merge(this);
            });
            $("#last").click(function(){
                merge(this);
            });
        }
        //判断提交的表单描述是否重复
        function funisRepeat(){
            var isRepeat;
            isRepeat="{{ isRepeat }}";
            if (isRepeat==1){
                alert("环境配置重复");
            }
        }
    </script>
</head>
<body role="document">
    <!--环境搜索栏-->
    <div class="page-header" >
        <form class="navbar-form" method="GET" action="/env_search_name/">
            <div class="form-group">
                <input id="ipt2" name="ip" type="text" placeholder="ip" class="form-control" value={{ env_ip }}>
                <input  id="ipt3" name="host" type="text" placeholder="域名" class="form-control" value={{ env_host }}>
                <input id="ipt4" name="port" type="text" placeholder="端口" class="form-control" value={{ env_port }}>
            </div>
            <button id="btn4" type="submit" class="btn btn-default" style="background:#C0C0C0">搜索</button>
            {% csrf_token %}
        </form>
    </div>
    <!--警告框-->
    <div id="myAlert" class="alert alert-warning" style="display: none">
	    <a href="#" class="close" data-dismiss="alert">&times;</a>
	    <strong>警告！</strong>编辑时只能勾选一条。
    </div>
    <div id="myAlert1" class="alert alert-warning" style="display: none">
	    <a href="#" class="close" data-dismiss="alert">&times;</a>
	    <strong>警告！</strong>删除时一定要勾选一条。
    </div>
    <!--按钮-->
    <div class="btn-toolbar" role="toolbar">
        <div class="btn-group">
            <button id="btn1" class="btn btn-default" style="background:#3300CC;color:white;" data-toggle="modal" data-target="#addMyModal" >
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>添加
            </button>
            <button id="btn2" class="btn btn-default" style="background:#3300CC;color:white;" data-toggle="modal" data-target="#">
                <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>修改
            </button>
            <form id="del" method="POST" action="/env_delete_data/" style="display:inline;">
                <input id="ipt1" type="text" name="id" style="display:none"/>
                <button id="btn3" type="onclick" class="btn btn-default" style="background:#3300CC;color:white;">
                    <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>删除
                </button>
                {% csrf_token %}
            </form>
        </div>
    </div>
    <!--环境列表-->
    <div>
        <div>
            <table id="table" class="table table-striped">
                <tr>
                    <th>选中</th><th>TAPD单号</th><th>标题</th><th>状态</th><th>上线时间</th><th>环境</th><th>测试人员</th><th>开发人员</th><th>涉及项目</th><th>描述</th><th>是否为计划上线</th>
                </tr>
                <tbody>
                {% for report in reports %}
                    <tr>
                        <td id="che1"><input type="checkbox"/></td>
                        <td>{{ report.tapd_id }}</td>
                        <td>{{ report.name }}</td>
                        <td>{{ report.status }}</td>
                        <td>{{ report.release_time }}</td>
                        <td>{{ report.environment }}</td>
                        <td>{{ report.tester }}</td>
                        <td>{{ report.developer }}</td>
                        <td>{{ report.project }}</td>
                        <td>{{ report.comments }}</td>
                        <td>{{ report.is_plan }}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    <!-- 模态框示例（Modal） -->
    <!--新增-->
    <div class="modal fade" id="addMyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog" style="max-width:400px">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					新增环境配置
				</h4>
			</div>
			<div class="modal-body">
                <form role="form" method='POST' action="/add_data/">
                    <div class="form-group">
                        <label  for="ip">TAPD单号</label>
                        <input  type="text" class="form-control" name="ip" placeholder="请输入TAPD单号" >
                    </div>
                    <div class="form-group">
                        <label for="host">标题</label>
                        <input  type="text" class="form-control" name="host" placeholder="请输入标题">
                    </div>
                    <div class="form-group">
                        <label for="port">状态</label>
                        <input  type="text" class="form-control" name="port" placeholder="请输入状态" >
                    </div>
                    <div class="form-group">
                        <label for="desc">上线时间</label>
                        <input  type="text" class="form-control" name="desc" placeholder="请输入上线时间" required>
                    </div>
                    <div class="form-group">
                        <label for="desc">环境</label>
                        <input  type="text" class="form-control" name="desc" placeholder="请输入环境" required>
                    </div>
                    <div class="form-group">
                        <label for="desc">测试人员</label>
                        <input  type="text" class="form-control" name="desc" placeholder="请输入测试人员" required>
                    </div>
                    <div class="form-group">
                        <label for="desc">开发人员</label>
                        <input  type="text" class="form-control" name="desc" placeholder="请输入开发人员" required>
                    </div>
                    <div class="form-group">
                        <label for="desc">涉及项目</label>
                        <input  type="text" class="form-control" name="desc" placeholder="请输入涉及项目" required>
                    </div>
                    <div class="form-group">
                        <label for="desc">描述</label>
                        <input  type="text" class="form-control" name="desc" placeholder="请输入描述" required>
                    </div>
                    <div class="form-group">
                        <label for="desc">是否为计划上线</label>
                        <input  type="text" class="form-control" name="desc" placeholder="是否为计划上线" required>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
				        </button>
				        <button type="submit" class="btn btn-primary">
					    提交
				        </button>
			        </div>
                    {% csrf_token %}
                </form>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
    </div>
    <!-- 编辑 -->
    <div class="modal fade" id="editMyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog" style="max-width:400px">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					编辑环境配置
				</h4>
			</div>
			<div class="modal-body">
                <form role="form" method='POST' action="/env_edit_data/">
                    <div class="form-group" style="display: none">
                        <label  for="id">id</label>
                        <input  type="text" class="ipt form-control" name="id" placeholder="请输入id" >
                    </div>
                    <div class="form-group">
                        <label  for="ip">ip</label>
                        <input  type="text" class="ipt form-control" name="ip" placeholder="请输入ip" >
                    </div>
                    <div class="form-group">
                        <label for="host">域名</label>
                        <input  type="text" class="ipt form-control" name="host" placeholder="请输入域名">
                    </div>
                    <div class="form-group">
                        <label for="port">端口</label>
                        <input  type="text" class="ipt form-control" name="port" placeholder="请输入端口" >
                    </div>
                    <div class="form-group">
                        <label for="desc">描述</label>
                        <input  type="text" class="ipt form-control" name="desc" placeholder="请输入描述" readonly="readonly" required>
                   </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
				        </button>
				        <button type="submit" class="btn btn-primary">
					    提交
				        </button>
			        </div>
                    {% csrf_token %}
                </form>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
    </div>
    <!--分页器-->
    <div style="text-align: right;">
        <ul class="pagination pagination-sm">
            <li>
                <span class="current">
                    Page {{ envs.number }} of {{ envs.paginator.num_pages }}
                </span>
            </li>
            <li>
                <a id="first" href="/env/?page=1">
                    <span class="glyphicon glyphicon-fast-backward"></span>
                </a>
            </li>
            <li>
                {% if envs.has_previous %}
                <a id="previous" href="/env/?page={{ envs.previous_page_number }}">
                    <span class="glyphicon glyphicon-backward"></span>
                </a>
                {% endif %}
            </li>
            <li>
                {% if envs.has_next %}
                <a id="next" href="/env/?page={{ envs.next_page_number }}">
                    <span class="glyphicon glyphicon-forward"></span>
                </a>
                {% endif %}
            </li>
            <li>
                <a id="last" href="/env/?page={{ envs.paginator.num_pages }}">
                    <span class="glyphicon glyphicon-fast-forward"></span>
                </a>
            </li>
        </ul>
    </div>
</body>
</html>